<!-- <style>
.deviceTable .ivu-table-cell {
     padding-left: 0px;
     padding-right: 0px;
} 
</style> -->

<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.title {
  color: #666;
  font-size: 24px;
}

.banner {
  margin-top: 20px;
}

.table {
  margin-top: 20px;
}

.mf {
  margin-left: 20px;
}

.all {
  margin-top: 20px;
  font-size: 18px;
}

.relateDevice {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateDeviceTitle {
  font-size: 20px;
  margin-bottom: 20px;
}

.relateUser {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: scroll;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateButton {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.discInfoItem {
  margin-top: 20px;
}

.itemTitle {
  margin-bottom: 20px;
}

.discInfoConten {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

.relateDisc {
  position: fixed;
  padding: 20px;
  left: 10%;
  top: 17%;
  right: 45%;
  bottom: 10%;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
  font-size: 18px;
}

.table_1 {
  overflow: scroll;
}

.search {
  display: flex;
  flex-wrap: wrap;
}
</style>

<template>
    <div class="wrapp">
        <div class="head">
            <div class="title">矿机列表</div>
            <Button type="primary" @click="toAddDevicePage">新增</Button>
        </div>

        <div class="banner">

            <div class="search">
                <Input type="text" placeholder="手机号/设备ID/IP地址/位置" style="width:200px;" v-model="searchInput" @keyup.enter.native="keyset($event)" />
                <div>
                    <span style="margin-left:30px;font-size:15px;line-height:15px;vertical-align: -3px;font-weight: bold;">矿机状态：</span>
                    <Select v-model="selectDataLine" style="width:200px;margin-left:5px;" @on-change="selectDataLineFun" :label-in-value="laberCon">
                        <Option :value="item.value" :label="item.label" v-for="(item,index) in selectListLine" :key="index"></Option>
                    </Select>
                </div>
                <!-- <div>
                  <span style="margin-left:30px;font-size:15px;line-height:15px;vertical-align: -3px;font-weight: bold;">项目类型：</span>
                  <Select v-model="selectDataType" style="width:200px;margin-left:5px;" @on-change="selectDataTypeFun" :label-in-value="laberCon">
                    <Option :value="item.value" :label="item.label" v-for="(item,index) in selectListType" :key="index"></Option>
                  </Select>
                </div> -->
                <div>
                    <span style="margin-left:30px;font-size:15px;line-height:15px;vertical-align: -3px;font-weight: bold;">订单状态：</span>
                    <Select v-model="selectDataState" style="width:200px;margin-left:5px;" @on-change="selectDataStateFun" :label-in-value="laberCon">
                        <Option :value="item.value" :label="item.label" v-for="(item,index) in selectListState" :key="index"></Option>
                    </Select>
                </div>
                <Button type="primary" style="margin-left:20px;" @click="ensureAction">确定</Button>
            </div>
            <div class="all">
                <span class="mf f_16" v-if="minerCount">矿机总数：{{minerCount}}</span>
                <span v-else>矿机总数：---</span>
                <span class="mf f_16" v-if="nodeCount">节点总数：{{nodeCount}}</span>
                <span v-else>节点总数:---</span>
                <span class="mf f_16" v-if="onlineMinerCount">在线矿机总数：{{onlineMinerCount}}</span>
                <span v-else>在线矿机总数:---</span>
                <span class="mf f_16" v-if="offlineMinerCount">离线矿机总数：{{offlineMinerCount}}</span>
                <span v-else>离线矿机总数:---</span>
            </div>
            <div class="table">
                <Table class="deviceTable" :columns="columnsData" :data="userShowData" :border="true" :loading="isLoading">
                    <template slot-scope="{ row, index }" slot="address">
                        <Input type="text" v-model="editAddress" v-if="editIndex === index" />
                        <span v-else style="border-bottom:1px solid">{{ row.address }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="minerNo">
                        <Input type="text" v-model="editMinerNo" v-if="editIndex === index" />
                        <!-- <span v-else style="border-bottom:1px solid">{{ row.minerNo }}</span> -->
                        <Tooltip :content="row.minerNo" v-else style="border-bottom:1px solid">
                            {{ row.minerNo}}
                        </Tooltip>
                    </template>

                    <template slot-scope="{ row, index }" slot="orderNo">
                        <Input type="text" v-model="editOrderNo" v-if="editIndex === index" />
                        <Tooltip :content="row.orderNo" v-else style="border-bottom:1px solid">
                            {{ row.orderNo | hideWord}}
                        </Tooltip>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <div v-if="editIndex === index">
                            <Button style="margin-right: 5px;" type="primary" @click="handleSave(row,index)">保存</Button>
                            <Button @click="editIndex = -1">取消</Button>
                        </div>
                        <div v-else>
                            <Button style="margin-right: 5px;" @click="handleEdit(row, index)">编辑</Button>
                            <Button style="margin-right: 5px;" type="error" @click="syncMinerInfo(row)" v-show="row.iotfsUid != null && row.iotfsUid !== ''" :loading="syncLoading">同步</Button>
                            <Button style="margin-right: 5px;" type="error" @click="remove(row)">删除</Button>
                        </div>
                    </template>
                </Table>
                <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total placement="top" @on-change="handlePage" style="margin-top:20px;"></Page>
            </div>
            <Modal title="节点列表" v-model="relateUserShow" :mask-closable="false" width="1024">
                <div class="relateUserTitle" style="color:red;font-size:18px;">设备ID:{{uid}}</div>
                <Table :columns="relateUserColumnsData" :data="relateUserShowData" :border="true" style="margin-top:20px;" height="400"></Table>
            </Modal>

            <Modal title="矿机详情" v-model="discShow" :mask-closable="false">
                <div class="relateUserTitle" style="color:red">设备ID:{{uid}}</div>
                <div class="discInfo">
                    <div class="discInfoItem">
                        <p class="itemTitle">系统信息</p>
                        <div class="discInfoConten">
                            <span class="itemSpan">1. 产品型号 [ {{system.hostname}} ]</span>
                            <span class="itemSpan">2. 设备编号 [ {{uid}} ]</span>

                            <span class="itemSpan">3. Storjshare [ {{daemon}} ,{{core}} ,{{protocol}}]</span>
                            <span class="itemSpan">4. Teamviewer [ ID:{{system.tvid}},Version:{{system.tv_version}} ]</span>
                        </div>
                    </div>
                    <div class="discInfoItem">
                        <p class="itemTitle">硬件信息</p>
                        <div class="discInfoConten">
                            <span class="itemSpan">1. MAC：{{hardware.Mac}}</span>
                            <span class="itemSpan">2. CPU：{{cpu}}</span>
                            <span class="itemSpan">3.内存：总共：{{mem_total}}GB 剩余：{{mem_free}}GB</span>
                            <span class="itemSpan">4. 硬盘：总共：{{all}}GB&nbsp;&nbsp; 剩余：{{free}}GB</span>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "DeviceList",
  data() {
    return {
      relateUserShow: false,
      discShow: false,
      uid: "",
      daemon: "",
      core: "",
      protocol: "",
      cpu: "",
      Mem: {},
      Disk: {},
      system: {},
      hardware: {},
      mem_total: 0,
      mem_free: 0,
      all: 0,
      free: 0,

      relateUserColumnsData: [
        {
          title: "节点",
          key: "id",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.relateUserShowData[params.index].id,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.relateUserShowData[params.index].id)
              )
            ]);
          }
        },
        {
          title: "钱包地址",
          key: "widget",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.relateUserShowData[params.index].widget,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.relateUserShowData[params.index].widget)
              )
            ]);
          }
        },
        {
          title: "节点路径",
          key: "configPath",
          align: "center",
          width: 150
        },
        {
          title: "Status",
          key: "status",
          align: "center",
          width: 150
        },
        {
          title: "Uptime",
          key: "uptime",
          align: "center",
          width: 150
        },
        {
          title: "Bridges",
          key: "bridgeConnectionStatus",
          align: "center",
          width: 150
        },
        {
          title: "Allocs",
          key: "allocs",
          align: "center",
          width: 150
        },
        {
          title: "Shared",
          key: "shared",
          align: "center",
          width: 150
        },
        {
          title: "Delta",
          key: "delta",
          align: "center",
          width: 150
        },
        {
          title: "Port",
          key: "port",
          align: "center",
          width: 150
        },
        {
          title: "节点控制",
          align: "center",
          key: "action",
          fixed: "right",
          width: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.star(params);
                    }
                  }
                },
                "运行"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.stop(params);
                    }
                  }
                },
                "停止"
              )
            ]);
          }
        }
      ],
      relateUserShowData: [],

      isLoading: true,
      //表格编辑
      editAddress: "",
      editMinerNo: "",
      editOrderNo: "",
      editIndex: -1,

      minerCount: "",
      nodeCount: "",
      offlineMinerCount: "",
      onlineMinerCount: "",

      selectDataLine: 3,
      selectDataType: "5",
      selectDataState: "5",
      pageTotal: 0,
      pageNum: 1,
      pageSize: 20,
      //搜索
      laberCon: true,
      searchInput: "",
      selectListLine: [
        {
          value: 1,
          label: "在线"
        },
        {
          value: 0,
          label: "离线"
        },
        {
          value: 3,
          label: "全部"
        }
      ],
      selectListType: [
        {
          value: "1",
          label: "通用"
        },
        {
          value: "2",
          label: "节点"
        },
        {
          value: "3",
          label: "共建"
        },
        {
          value: "4",
          label: "算力"
        },
        {
          value: "5",
          label: "全部"
        }
      ],
      selectListState: [
        {
          value: "1",
          label: "下单成功，正在备货"
        },
        {
          value: "2",
          label: "矿机出货测试中"
        },
        {
          value: "3",
          label: "已打包交付给物流公司"
        },
        {
          value: "4",
          label: "已完成"
        },
        {
          value: "5",
          label: "全部"
        }
      ],
      columnsData: [
        {
          title: "矿机ID",
          key: "id",
          align: "center",
          width: 120
        },
        {
          title: "Dev ID",
          key: "iotfsDevId",
          align: "center",
          width: 170,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.userShowData[params.index].iotfsDevId,
                    maxWidth: "350",
                    placement: "right-end"
                  }
                },
                [
                  h(
                    "span",
                    {
                      style: {
                        borderBottom: "1px solid",
                        cursor: "pointer",
                        color: "red"
                      },
                      on: {
                        click: () => {
                          this.discInfo(params);
                        }
                      }
                    },
                    this.hideWord(this.userShowData[params.index].iotfsDevId)
                  )
                ]
              )
            ]);
          }
        },
        {
          title: "节点数",
          key: "nodeCount",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    borderBottom: "1px solid",
                    cursor: "pointer",
                    color: "red"
                  },
                  on: {
                    click: () => {
                      this.showNodeList(params);
                    }
                  }
                },
                this.userShowData[params.index].nodeCount
              )
            ]);
          }
        },
        {
          title: "矿机编号",
          slot: "minerNo",
          key: "minerNo",
          align: "center",
          width: 200
          //   render: (h, params) => {
          //     return h("div", [
          //       h(
          //         "Tooltip",
          //         {
          //           props: {
          //             content: this.userShowData[params.index].minerNo,
          //             maxWidth: "350"
          //           }
          //         },
          //         this.hideWord(this.userShowData[params.index].minerNo)
          //       )
          //     ]);
          //   }
        },
        {
          title: "订单编号",
          slot: "orderNo",
          key: "orderNo",
          align: "center",
          width: 160
          //   render: (h, params) => {
          //     return h("div", [
          //       h(
          //         "Tooltip",
          //         {
          //           props: {
          //             content: this.userShowData[params.index].orderNo,
          //             maxWidth: "350"
          //           }
          //         },
          //         this.hideWord(this.userShowData[params.index].orderNo)
          //       )
          //     ]);
          //   }
        },

        {
          title: "物流状态",
          align: "center",
          width: 200,
          key: "orderStatus",
          render: (h, params) => {
            let orderStatus;
            if (params.row.orderStatus) {
              orderStatus = params.row.orderStatus;
            } else {
              orderStatus = 5;
            }
            return h(
              "Select",
              {
                props: {
                  value: orderStatus
                },
                on: {
                  "on-change": e => {
                    this.change(e, params);
                  }
                }
              },
              [
                h(
                  "Option",
                  {
                    props: {
                      value: 5
                    }
                  },
                  "空"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: 1
                    }
                  },
                  "下单成功，正在备货"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: 2
                    }
                  },
                  "矿机出货测试中"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: 3
                    }
                  },
                  "已打包交付给物流公司"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: 4
                    }
                  },
                  "已完成"
                )
              ]
            );
          }
        },

        {
          title: "状态",
          key: "runningStatus",
          align: "center",
          width: 80
        },
        {
          title: "地理位置",
          key: "address",
          slot: "address",
          align: "center",
          width: 120
        },
        {
          title: "矿机钱包地址",
          key: "bindWallet",
          align: "center",
          width: 170,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.userShowData[params.index].bindWallet,
                    maxWidth: "350"
                  }
                },
                this.hideWord(this.userShowData[params.index].bindWallet)
              )
            ]);
          }
        },
        {
          title: "TVID",
          key: "teamViewId",
          align: "center",
          width: 160
        },
        {
          title: "IP地址",
          key: "ipAddress",
          align: "center",
          width: 160
        },
        {
          title: "操作",
          fixed: "right",
          align: "center",
          slot: "action",
          width: 260
        }
      ],
      userShowData: [],
      syncLoading: false,
      token: ""
    };
  },
  mounted() {
    this.tokenCheck();
    this.getDeviceData(0);
    this.getControl();
  },
  filters: {
    hideWord: function(string) {
      if (string) {
        string = String(string);
        let len = string.length;
        let stringBefore = string.slice(0, 4);
        let stringBeHand = string.slice(len - 4, len + 1);
        let newString = stringBefore + "..." + stringBeHand;
        return newString;
      } else {
        return;
      }
    }
  },
  watch: {
    searchInput: function(value) {
      if (!value) {
        let cond = {};
        cond = this.require();
        this.getDeviceData(0, cond);
      }
    }
  },
  methods: {
    change(e, params) {
      this.tokenCheck();
      let url = apis.changDeviec;
      params.row.orderStatus = e;
      let payload = {};
      payload.id = params.row.id;
      payload.iotfsDevId = params.row.iotfsDevId;
      payload.orderStatus = e;
      payload.address = params.row.address;
      payload.minerNo = params.row.minerNo;
      payload.orderNo = params.row.orderNo;
      this.$axios({
        method: "put",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            this.$Message.info("更新成功");
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //token过期检测
    tokenCheck() {
      this.token = this.$localStorage.storageGet("TOKEN");
      if (!this.token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
    },
    //查询
    //条件搜索
    require() {
      let cond = {};
      if (this.searchInput) {
        cond.keyword = this.searchInput;
      }
      if (this.selectDataLine) {
        cond.runningStatus = this.selectDataLine;
      } else {
        if (this.selectDataLine == 0) {
          cond.runningStatus = this.selectDataLine;
        }
      }
      if (this.selectDataType) {
        cond.groupType = this.selectDataType;
      }
      if (this.selectDataState) {
        cond.orderStatus = this.selectDataState;
      }
      return cond;
    },
    ensureAction() {
      let cond = this.require();
      this.getDeviceData(0, cond);
    },
    //矿机列表全部查询
    getDeviceData(pageNum, cond) {
      let url = "";
      if (!cond) {
        url =
          apis.deviceList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
      } else {
        url =
          apis.deviceList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
        if (cond.keyword) {
          url = url + "&keyword=" + cond.keyword;
        }
        if (cond.groupType != "5") {
          url = url + "&groupType=" + cond.groupType;
        }
        if (cond.orderStatus != "5") {
          url = url + "&orderStatus=" + cond.orderStatus;
        }
        if (cond.runningStatus != 3) {
          url = url + "&runningStatus=" + cond.runningStatus;
        }
      }
      this.isLoading = true;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            this.isLoading = false;
            this.userShowData = res.data;
            console.log(typeof this.userShowData[0].runningStatus);
            this.userShowData.forEach(element => {
              if (element.runningStatus === 1) {
                element.runningStatus = "在线";
              } else if (element.runningStatus === 0) {
                element.runningStatus = "离线";
              }
            });
            console.log(this.userShowData);
            this.pageTotal = parseInt(res.headers["x-total-count"]);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //矿机综合查询
    getControl() {
      let url = "";
      url = apis.deviceCheck;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.minerCount = res.data.minerCount;
            this.nodeCount = res.data.nodeCount;
            this.offlineMinerCount = res.data.offlineMinerCount;
            this.onlineMinerCount = res.data.onlineMinerCount;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //select选中框  在线/离线
    selectDataLineFun(obj) {
      this.pageNum = 1;
      let cond = this.require();
      this.getDeviceData(0, cond);
    },
    selectDataTypeFun(obj) {
      this.pageNum = 1;
      let cond = this.require();
      this.getDeviceData(0, cond);
    },
    selectDataStateFun(obj) {
      this.pageNum = 1;
      let cond = this.require();
      this.getDeviceData(0, cond);
    },
    hideWord(string) {
      if (string) {
        string = String(string);
        let len = string.length;
        let stringBefore = string.slice(0, 4);
        let stringBeHand = string.slice(len - 4, len + 1);
        let newString = stringBefore + "..." + stringBeHand;
        return newString;
      } else {
        return;
      }
    },
    handlePage(value) {
      this.pageNum = value;
      let cond = this.require();
      this.getDeviceData(this.pageNum - 1, cond);
    },
    //表格操作
    handleSave(row, index) {
      this.editIndex = -1;
      let payload = {
        id: row.id,
        iotfsDevId: row.iotfsDevId
      };
      payload.address = this.editAddress;
      payload.minerNo = this.editMinerNo;
      payload.orderNo = this.editOrderNo;
      payload.orderStatus = row.orderStatus;
      let content_1 =
        "<div>设备：" + "<" + row.iotfsDevId + ">" + "正在修改一下内容:</div>";
      if (this.editAddress != row.address) {
        content_1 =
          content_1 + "<div>地址修改为:" + this.editAddress + "</div>";
      }
      if (this.editMinerNo != row.minerNo) {
        content_1 =
          content_1 + "<div>矿机编号修改为:" + this.editMinerNo + "</div>";
      }
      if (this.editOrderNo != row.orderNo) {
        content_1 =
          content_1 + "<div>订单编号修改为:" + this.editOrderNo + "</div>";
      }

      this.$Modal.confirm({
        title: "确认信息",
        content: content_1,
        onOk: () => {
          this.tokenCheck();
          let url = apis.changDeviec;

          this.$axios({
            method: "put",
            url: url,
            headers: {
              Authorization: "Bearer " + this.token
            },
            data: payload
          })
            .then(res => {
              if (res.status == "200") {
                let cond = this.require();
                this.getDeviceData(0, this.require());
                console.log(this.pageNum);
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
    },
    handleEdit(row, index) {
      this.editIndex = index;
      this.editAddress = row.address;
      this.editMinerNo = row.minerNo;
      this.editOrderNo = row.orderNo;
    },
    async syncMinerInfo(row) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      this.syncLoading = true;
      let syncResponse = await this.$axios.post(
        `${apis.syncMiner}${row.id}`,
        null,
        { headers: { Authorization: "Bearer " + this.token } }
      );
      this.syncLoading = false;
      if (syncResponse.status === 200) {
        let cond = this.require();
        this.getDeviceData(this.pageNum - 1, cond);
        this.$Notice.success({ title: "同步完成", desc: "矿机信息同步完成" });
      } else {
        this.$Message.error(syncResponse.data.detail);
        this.$Notice.error({
          title: "同步失败",
          desc: syncResponse.data.detail
        });
      }
    },
    remove(row) {
      this.$Modal.confirm({
        title: "确认删除",
        content:
          "<div>设备：" +
          "<div>" +
          row.iotfsDevId +
          "</div>" +
          "正在删除</div>",
        width: 570,
        onOk: () => {
          let token = this.$localStorage.storageGet("TOKEN");
          if (!token) {
            this.$router.push({
              name: "Login"
            });
            return;
          }

          let url = apis.deletDevice + row.id;

          this.$axios({
            method: "delete",
            url: url,
            headers: {
              Authorization: "Bearer " + token
            }
          })
            .then(res => {
              console.log(res);
              if (res.status == 200) {
                let cond = this.require();
                this.getDeviceData(this.pageNum - 1, cond);
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
    },
    toAddDevicePage() {
      this.$router.push({
        name: "AddDevice"
      });
    },
    //节点列表
    showNodeList(params) {
      this.relateUserShowData = [];
      this.uid = params.row.iotfsDevId;
      this.relateUserShow = true;
      let url = "";
      url = apis.nodeList + params.row.id;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            let data = res.data;
            if (data) {
              data.forEach(element => {
                let ele = JSON.parse(element.nodeInfo);
                this.relateUserShowData.push(ele);
              });
            }
            console.log(this.relateUserShowData);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    star(params) {
      this.$Message.info("别点了，这个功能还没有");
      return;
      let url = apis.nodeAction + "start" + "/" + params.row.id;
      console.log(params.row.id);
      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //节点停止
    stop(params) {
      this.$Message.info("别点了，这个功能还没有");
      return;
      let url = apis.nodeAction + "stop" + "/" + params.row.id;

      this.$axios({
        method: "post",
        url: url,
        headers: {
          Authorization: "Bearer " + this.token
        }
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    cancelUser() {
      this.relateUserShow = false;
    },
    bindingUser() {
      this.relateUserShow = false;
    },
    //硬件信息
    discInfo(params) {
      this.discShow = true;
      this.uid = params.row.iotfsDevId;
      let element = params.row;
      let jsonSytem = {};
      let jsonHardware = {};
      if (element.systemInfo) {
        jsonSytem = JSON.parse(element.systemInfo);
      }
      if (element.hardwareInfo) {
        jsonHardware = JSON.parse(element.hardwareInfo);
        console.log(jsonHardware);
      }

      let a = jsonSytem.storj_version;
      let arry = a.split(",");
      let daemon_1 = arry[0];
      let core_1 = arry[1];
      let protocol_1 = arry[2];
      let cpu_1 = jsonHardware.Cpu.processors[0].model_name;

      this.system = jsonSytem;
      this.hardware = jsonHardware;
      this.daemon = daemon_1;
      this.core = core_1;
      this.protocol = protocol_1;
      this.cpu = cpu_1;
      this.mem_total = (jsonHardware.Mem.mem_total / 1024.0 / 1024.0).toFixed(
        2
      );
      this.mem_free = (jsonHardware.Mem.mem_free / 1024.0 / 1024.0).toFixed(2);
      this.all = (jsonHardware.Disk.all / 1024.0 / 1024.0).toFixed(2);
      this.free = (jsonHardware.Disk.free / 1024.0 / 1024.0).toFixed(2);
      console.log(this.system);
      console.log(this.hardware.Mem.mem_total);
    },
    tuichu() {
      this.discShow = false;
    },
    //键盘事件
    keyset(ev) {
      if (ev.keyCode == 13) {
        let cond = this.require();
        this.getDeviceData(0, cond);
      }
    },
    closeDisc() {
      this.discShow = false;
      this.relateUserShow = false;
      console.log(localStorage.feng);
    }
  },
  created() {
    window.addEventListener("beforeunload", e => {
      localStorage.reLoad = "reLoadDeviceList";
      localStorage.name = "1-3";
    });
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key == 27) {
        lett.closeDisc();
      }
    };
  }
};
</script>